<template>
  <div class="visitor-rule">
    <el-card shadow="never">
      <el-button type="primary" @click="viewDetails(null)">添加访客须知</el-button>
    </el-card>

    <el-card class="visitor-rule__list" shadow="never">
      <el-table
        v-loading="loading"
        :data="list"
        border
      >
        <el-table-column prop="id" label="ID" align="center" />
        <el-table-column prop="content" label="内容" align="center">
          <template v-slot="{ row }">
            <el-button type="text" @click="previewDetail(row)">点击查看</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="enable" label="是否启用" align="center">
          <template v-slot="{ row }">
            <el-switch
              :value="row.enable"
              active-color="#409EFF"
              inactive-color="#DCDFE6"
              :active-value="1"
              :inactive-value="0"
              @change="setEnableState($event, row)"
            />
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="创建时间" align="center">
          <template v-slot="{ row }">
            {{ timeFormat(row.created_at) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template v-slot="{ row }">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="viewDetails(row.id)"
            >
              编辑
            </el-button>

            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="deleteVisitRule(row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <Pagination
          v-if="total"
          style="margin-top: 0; padding-bottom: 0;"
          :total="total"
          :limit="params.paginate"
          :page="params.page"
          @pagination="pagination"
        />
      </div>
    </el-card>
    <el-drawer
      :visible.sync="drawerOptions.visible"
      direction="rtl"
      size="860px"
      custom-class="preview-draw"
      :show-close="false"
      :wrapper-closable="false"
    >
      <div class="preview-draw__header">
        <div class="cancel-button" @click="drawerOptions.visible = false">
          <i class="icon el-icon-back" />
          <span>退出预览</span>
        </div>
      </div>
      <div class="preview-draw__body">
        <Preview
          :visitor-rules="drawerOptions.rules"
          :visitor-notice="drawerOptions.notice"
        />
      </div>

    </el-drawer>
  </div>
</template>
<script>
import { getVisitorRuleList, removeVisitorRule, enableVisitorRule } from '@/api//v2/visitor'
import Preview from '@/views/visitRule/components/Preview.vue'
import dayjs from 'dayjs'
import Pagination from '@/components/Pagination/index.vue'
export default {
  name: '',
  components: {
    Pagination,
    Preview
  },
  data() {
    return {
      list: [],
      loading: false,
      params: {
        page: 1,
        paginate: 10
      },
      total: 0,
      drawerOptions: {
        visible: false,
        notice: [],
        rules: []
      }

    }
  },
  computed: {

  },
  created() {
    this.getVisitorRules()
  },
  methods: {
    pagination(e) {
      this.params.page = e.page
      this.params.paginate = e.limit
      this.refresh()
    },
    async getVisitorRules() {
      this.loading = true
      try {
        const res = await getVisitorRuleList(this.params)
        this.list = res.data
        console.log('res --------->', res)
        this.total = res.meta.total
      } catch (error) {
        this.$message.success('获取访问须知列表失败')
      } finally {
        this.loading = false
      }
    },

    async setEnableState(e, row) {
      console.log('e --------->', e)
      if (row.enable === 1) return this.$message.error('必须有一个模板为启用状态')
      this.$set(row, 'enable', 1)
      try {
        const res = await enableVisitorRule({ id: row.id })
        this.refresh()
        this.$message.success('设置成功')
      } catch (error) {
        this.$message.error(error.response.data.message || '设置失败')
      }
    },

    deleteVisitRule(row) {
      this.$confirm('是否删除该项？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.removeVisitorRule([row.id])
      })
    },

    async removeVisitorRule(ruleIds) {
      console.log('ruleIds --------->', ruleIds)
      try {
        const res = await removeVisitorRule({ ruleIds: JSON.stringify(ruleIds) })
        console.log('res --------->', res)
        this.$message.success('删除成功')
        this.refresh()
      } catch (error) {
        this.$message.error(error.response.data.message || '删除失败')
      }
    },

    viewDetails(ruleId) {
      if (ruleId) {
        this.$router.push({ name: 'RuleDetails', query: { ruleId }})
      } else {
        this.$router.push({ name: 'RuleDetails' })
      }
    },

    refresh() {
      this.getVisitorRules()
    },

    timeFormat(time) {
      return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
    },

    previewDetail(row) {
      console.log('row --------->', row)
      this.drawerOptions.notice = row.content
      this.drawerOptions.rules = row.rule_details
      this.drawerOptions.visible = true
    }
  }
}
</script>
<style lang="scss" scoped>
.visitor-rule {
  padding: 20px;

  &__list {
    margin-top: 20px;
  }

  .pagination {
    display: flex;
    justify-content: end;
  }
}

::v-deep(.el-card) {
  border: none;
}

::v-deep(.preview-draw) {
  background-color: #F5F5F5;
  .preview-draw__header {
    margin-top: 30px;
    margin-bottom: 9px;
    padding-left: 40px;

    .cancel-button {
      cursor: pointer;
      width: 124px;
      border: 1px solid #1890ff;
      border-radius: 40px;
      padding: 8px 16px;
      color: #1890FF;
      display: flex;
      align-items: center;
      transition: all .3s;
      &:hover {
        background-color: #ECF5FF;
      }
      .icon {
        font-size: 24px;
      }

      >span {
        margin-left: 6px;
        font-size: 14px;
      }
    }
  }

  .preview-draw__body {
    display: flex;
    justify-content: center;
    align-items: center;

  }
}

::v-deep(.el-drawer__header) {
  margin-bottom: 0;
  padding: 0;
}
</style>
